<template>
    <el-form-item :label="props.label">
        <template #label>
            <span>{{ $props.label }}</span>
            <span class="tip">
                <el-tooltip v-if="props.tip" effect="dark" :content="props.tip" placement="top">
                    <i class="fa fa-question-circle"></i>
                </el-tooltip>
            </span>
        </template>
        <el-tag closable v-for="(subitem, i) in state.tags" :key="i" @close="del(i)" hit style="margin-right: 10px; margin-bottom: 10px">
            <view style="display: flex; align-items: center">
                <Icon name="el-icon-Edit" color="#8595F4" size="15" style="margin-right: 10px" @click="edit(i)" />
                {{ subitem }}
            </view>
        </el-tag>
        <el-button
            size="small"
            icon="el-icon-Plus"
            @click="add"
            style="margin-right: 10px; margin-bottom: 10px"
            v-show="state.tags.length < state.limit"
        />
    </el-form-item>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { reactive, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const emits = defineEmits<{
    (e: 'update:modelValue', modelValue: string[]): void
}>()

const props = withDefaults(
    defineProps<{
        modelValue: string[]
        label: string
        tip?: string
        limit?: string | number
    }>(),
    {
        modelValue: () => [],
        limit: 0,
    }
)

const state = reactive({
    tags: props.modelValue ? props.modelValue.filter((item) => item != '') : [],
    limit: props.limit ? Number(props.limit) : 0,
})

const add = () => {
    ElMessageBox.prompt('', t('Add'), {
        confirmButtonText: t('Confirm'),
        cancelButtonText: t('Cancel'),
        inputPattern: /^\S+$/,
        inputErrorMessage: t('validate.Content cannot be empty'),
        closeOnClickModal: false,
    })
        .then(({ value }: { value: string }) => {
            value = value.trim()
            state.tags.push(value)
        })
        .catch(() => {})
}

const edit = (index: number) => {
    ElMessageBox.prompt('', t('Edit'), {
        confirmButtonText: t('Confirm'),
        cancelButtonText: t('Cancel'),
        inputPattern: /^\S+$/,
        inputErrorMessage: t('validate.Content cannot be empty'),
        closeOnClickModal: false,
        inputValue: state.tags[index],
    })
        .then(({ value }: { value: string }) => {
            value = value.trim()
            state.tags[index] = value
        })
        .catch(() => {})
}

const del = (index: number) => {
    state.tags.splice(index, 1)
}

watch(
    () => props.modelValue,
    (newVal) => {
        state.tags = newVal
    }
)
watch(
    () => state.tags,
    (newVal) => {
        emits('update:modelValue', newVal)
    },
    { immediate: true, deep: true }
)
</script>

<style scoped lang="scss">
.tip {
    padding-left: 6px;
    color: var(--el-text-color-secondary);
    i {
        cursor: pointer;
    }
}
</style>
